<template>
  <div class="test-basket" :class="{ is__show: !!questionList.length }">
    <el-popover
      placement="left"
      :width="200"
      popper-class="cus-popover"
      trigger="hover"
    >
      <template #reference>
        <div class="cart-icon">
          <i class="iconfont iconshitilan" />
          <span>{{ questionList.length }}</span>
        </div>
      </template>
      <div class="question-list">
        <div
          class="question-list-item"
          v-for="(item, index) in questionType"
          :key="index"
        >
          <div>
            <span>{{index}}</span>
            <span>{{ item }}道</span>
            <span @click="removeQestionBase(index)">删除</span>
          </div>
        </div>
      </div>
      <div class="clear-base" @click="clearQestionBase">清空试题篮</div>
    </el-popover>
    <div class="main" @click="generatePaper">
      <span>生成试卷</span>
      <i class="iconfont iconshengchengshijuan" />
    </div>
  </div>
</template>

<script lang="ts">
import { PropType, computed, ref, watch } from "vue";
import $, { emitter } from "$";
import GeneratingComponent from "./generating.vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

export default {
  props: {
    questionList:{
      type: Array as PropType<any[]>,
      default: () => [],
    }
  },
  setup(props) {
    let store = useStore();
    let subject = computed(() => store.getters.subject.code).value;
    let questionTypeList = ref([]);
    let questionType = ref({});
    let visible = ref(false);
    
    watch(props.questionList, () => {
      let type = {};
      props.questionList.map(item => {
        if (type[item.questionTypeName]) {
          type[item.questionTypeName] = type[item.questionTypeName] + 1;
        } else {
          type[item.questionTypeName] = 1
        };
        questionType.value = type;
      })
    }, { immediate: true })
    // let questionBase = computed(() => {
    //   let copy = $.clone(questionTypeList.value);
    //   copy.forEach((element: any) => {
    //     element.typeCount = 0;
    //     props.questionList!.forEach((ele: any) => {
    //       if (element.jyQuestionType === ele.type) {
    //         element.typeCount = element.typeCount + 1 || 1;
    //       }
    //     });
    //   });
    //   return copy;
    // });
    const queryTypeBySubject = (subjectCode)=>{
      $.http
        .post("/tiku/questionType/queryTypeBySubject", { subject: subjectCode })
        .then((res) => {
          questionTypeList.value = res.json;
      });
    }
    emitter.emit('effect', queryTypeBySubject)
    /** 清空试题篮 */
    const clearQestionBase = () => {
      emitter.emit("clear-questionBase");
      visible.value = false;
    };
    /**
     * 删除试题篮
     * @params type 试题类型
     */
    const removeQestionBase = (type) => {
      emitter.emit("remove-questionBase", props.questionList.find(item => item.questionTypeName === type).type);
      if (props.questionList!.length < 1) {
        visible.value = false;
      }
    };
    const generatePaper = async () => {
      let formGroup = await $.modal.create({
        title: '生成试卷',
        width: 500,
        component: GeneratingComponent
      })

      let paperChapters = props.questionList!.reduce((group, node: any) => {
        let index = group.findIndex((n: any)=> n.title === node.questionTypeName)
        if (index > -1) {
          group[index].questions.push({ score: 0, subjectId: node.subjectId, questionId: node.id });
        } else {
          group[group.length] = {
            avgScore: 0,
            totalScore: 0,
            title: node.questionTypeName,
            questions: [{ score: 0, subjectId: node.subjectId, questionId: node.id }]
          }
        }
        return group;
      }, [] as any[])
      let params = {
        ...formGroup,
        subjectId: formGroup.subjectId[1],
        format: 1,
        sourceFrom: 1,
        totalScore: 0,
        paperChapters,
        questionCount: paperChapters.length
      }
      let res = await $.http.json('/tiku/paper/addPaper', params);
      ElMessage[res.result ? 'success' : 'warning'](res.result ? '生成试卷成功~！' : res.msg);
      res.result && window.open(`./#/test-paper-edit/false/${res.json.id}`);
      $.emitter.emit('question-request')
    }

    return {
      generatePaper,
      questionType,
      visible,
      clearQestionBase,
      removeQestionBase,
    };
  },
};
</script>

<style lang="scss" scoped>
.test-basket {
  width: 48px;
  color: #fff;
  border-radius: 6px;
  background: #72b22a;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 9;
  cursor: pointer;
  transform: translate3d(100%, 0, 0);
  transition: all 0.25s;
  pointer-events: none;
  &.is__show {
    transform: none;
    pointer-events: initial;
  }
  .cart-icon {
    padding: 15px 0;
    text-align: center;
    border-bottom: solid 4px #fff;
    position: relative;
    i {
      font-size: 26px;
    }
    span {
      display: block;
      height: 16px;
      padding: 0 4px;
      font-size: 12px;
      line-height: 14px;
      background: #faad14;
      border-radius: 8px;
      position: absolute;
      top: 10px;
      right: 8px;
    }
  }
  .main {
    padding: 14px 0;
    text-align: center;
    span {
      display: block;
      margin: 0 auto 4px;
      width: 14px;
      font-size: 14px;
    }
  }
}
.question-list {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  .question-list-item {
    > div {
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      :nth-child(3) {
        cursor: pointer;
        color: red;
      }
    }
  }
}
.clear-base {
  cursor: pointer;
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
  border-radius: 8px;
  color: #72b22a;
  padding: 5px 0;
}
</style>
